<template>
    <div>
        <el-button type="primary" class="seach" style="float: left; margin: 15px 0 10px 15px;" @click="query()"
            size="mini" icon="el-icon-search">搜索</el-button>
        <el-button type="primary" style="float: left; margin: 15px 0 10px 15px;" size="mini"
            @click="insertDialogVisible = true" v-show="hasPerms('menu:add:read')" icon="el-icon-plus">新增</el-button>
        <!-- 列表区域 -->
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="menuId" border
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="menuName" label="菜单名称" width="180"></el-table-column>
            <el-table-column prop="systemId" label="归属系统" width="180"></el-table-column>
            <el-table-column prop="url" label="菜单地址" width="180"></el-table-column>
            <el-table-column prop="menuValue" label="权限值" width="180"></el-table-column>
            <el-table-column prop="type" label="按钮类型" width="180">
                <template slot-scope="scope">
                    <el-tag :type="''" v-show="scope.row.type == 1" effect="dark">目录</el-tag>
                    <el-tag :type="'success'" v-show="scope.row.type == 2" effect="dark">菜单</el-tag>
                    <el-tag :type="'warning'" v-show="scope.row.type == 3" effect="dark">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="menuStatus" label="菜单状态" width="180">
                <template slot-scope="scope">
                    <el-tooltip :content="scope.row.menuStatus == 1 ? '开启' : '禁用'" placement="left">
                        <el-switch v-model='scope.row.menuStatus == 1' active-color="#13ce66" inactive-color="#ff4949"
                            @change="userswitch(scope.row)"></el-switch>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="180"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click='updateDalog(scope.row)' v-show="hasPerms('menu:edit:read')" icon="el-icon-edit"></el-button>
                    <el-button type="danger" size="mini" @click='deleteSmbit(scope.row)' v-show="hasPerms('menu:delete:read')" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页部分 -->
        <PageInfo class="page-class" :totalCount="totalCount" :pageSize="pageSize" @pageSizes="pageChange"
            @pageCurrent="pageCurrent" />
        <!-- 新增菜单区域 -->
        <MenuAddView :addDialog="insertDialogVisible"  @insertDialogFormVisible="chidAddMenu" :menus="menus"/>
        <!-- 编辑菜单区域 -->
        <MenuEditView :editDialog="editDialogVisible" :menuInfo="menuInfo" @insertDialogFormVisible="chidAddMenu" :menus="menus" :options="options" />
    </div>
</template>
<script>
import PageInfo from '../PageInfo.vue';
import { hasPermission } from '@/permission/index.js';
import MenuAddView from './menuAddView.vue';
import MenuEditView from './menuEditView.vue';
export default {
    data() {
        return {
            tableData: [],
            insertDialogVisible: false,
            editDialogVisible: false,
            searchMenuName: '',
            current: 1,
            pageSize: 10,
            totalCount: 0,
            options: [{
                systemId: 1,
                systemName: '黄金糕'
            }, {
                systemId: 2,
                systemName: '双皮奶'
            }, {
                systemId: 3,
                systemName: '蚵仔煎'
            }, {
                systemId: 4,
                systemName: '龙须面'
            }, {
                systemId: 5,
                systemName: '北京烤鸭'
            }],
            menus: [],
            menuInfo: {}
        }
    },
    components: {
        PageInfo,
        MenuAddView,
        MenuEditView
    },
    mounted() {
        this.getData()
        this.getMenus()
    },
    methods: {
        pageChange(num) {
            this.pageSize = num;
            this.getData();
        },
        pageCurrent(res) {
            this.current = res;
            this.getData();
        },
        //获取菜单 1 2集菜单
        getMenus() {
            this.$http({
                method: 'get',
                url: '/admin/menu/list'
            }).then(res => {
                let result = res.data
                if (result.code == 200) {
                    this.menus = result.data
                }
            })
        },
        getData() {
            let reqUser = {
                "current": this.current,
                "size": this.pageSize,
                "menuName": this.searchMenuName
            }
            this.$http({
                method: 'post',
                url: '/admin/menu/pageList',
                Headers: {
                    'Content-Type': 'application/json'
                },
                data: reqUser
            }).then(res => {
                let result = res.data;
                if (result.code == 200) {
                    this.tableData = result.data.data;
                    this.totalCount = result.data.total;
                }
            })
        },
        //删除
        deleteSmbit(row) {
            let newMenuId = row.menuId;
            this.$confirm('此操作将永久删除数据，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    method: 'delete',
                    url: '/admin/menu/delete/' + newMenuId,
                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            showClose: true,
                            message: '操作成功',
                            type: 'success'
                        });
                        //刷新列表
                        this.getData();
                        this.getMenus();
                    } else {
                        this.$message({
                            showClose: true,
                            message: '操作失败',
                            type: 'success'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: '已取消删除'
                });
            })
        },
        //开启/禁用
        async userswitch(row) {
            let status = row.menuStatus == 0 ? 1 : 0;
            let data = {
                "menuId": row.menuId,
                "menuStatus": status
            }
            await this.$http({
                url: '/admin/menu/update',
                method: 'post',
                Headers: {
                    "Content-Type": 'application/json'
                },
                data: data
            }).then(res => {
                let result = res.data;
                if (result.code === 200) {
                    this.$message({
                        showClose: true,
                        message: '操作成功',
                        type: 'success'
                    });
                    //刷新列表
                    this.getData();
                } else {
                    this.$message({
                        showClose: true,
                        message: '操作失败',
                        type: 'success'
                    });
                }
            })
        },
        //查询
        query() {
            this.getData();
            this.getMenus();
        },
        //编辑区域
        updateDalog(row) {
            this.editDialogVisible = true;
            this.$http({
                method:'get',
                url:'/admin/menu/getById/'+ row.menuId
            }).then(res=>{
                if(res.data.code != 200){
                    this.$message({
                        showClose: true,
                        message: '操作失败',
                        type: 'error'
                    });
                    return
                }
                this.menuInfo = res.data.data;
            })
        },
        hasPerms: function (perms) {
            return hasPermission(perms);
        },
        chidAddMenu(data){
            this.insertDialogVisible = data;
            this.editDialogVisible = data;
            this.getData();
            this.getMenus();
        }
    }
}
</script>
<style>
.seache-user {
    width: 180px;
    float: left;
}

.seach {
    float: left;
    margin-left: 20px;
}

.delete-user-btn {
    float: left;
    margin-bottom: 10px;
}

#table-user {
    height: 100%;
}
</style>